class LikeButton {
    constructor() {
        this.state = {
            isLiked: false
        }
    }
    setState(state) {
        const oldEl = this.el
        this.state = state
        this.el = this.render()
        if (this.onStateChange) this.onStateChange(oldEl, this.el)
    }
    changeLikeText() {
        this.setState({
            isLiked: !this.state.isLiked
        })
    }
    render() {
        console.log('render')
        let likeText = this.state.isLiked ? '取消' : '点赞';
        this.el = createDomFromString(`
            <div class="like-button">
                <span class="like-text">${likeText}</span>
                <span>👍</span>
            </div>
        `);
        this.el.addEventListener('click', () => {
            console.log('click')
            this.changeLikeText()
        }, false)
        return this.el;
    }
}




const wrapper = document.querySelector('.wrapper');
const likeButton1 = new LikeButton();
wrapper.appendChild(likeButton1.render());
const likeButton2 = new LikeButton();
wrapper.appendChild(likeButton2.render());
likeButton1.onStateChange = (oldEl, newEl) => {
   wrapper.insertBefore( newEl,oldEl)
   wrapper.removeChild( oldEl)
}
likeButton2.onStateChange = (oldEl, newEl) => {
    wrapper.insertBefore( newEl,oldEl)
    wrapper.removeChild( oldEl)
   
}